<template>
  <!--
  data属性,对象数组
  每个对象里关键的2个属性:
          label - 树节点名
          children - 该节点有没有孩子 配置子节点(对象 - label属性和children属性)
  props属性
    场景:后端返回的数据字段有时候不是label和children字段
        让后端改 - （后端不改怎么办）
        自己改 - 修改映射
  步骤:
      1. 在el-tree上添加属性 :props="defaultProps"
      2. 提供defaultProps数据
      3. 做映射，children对应的后端哪个字段 label对应后端哪个字段
      default-expand-all属性	是否默认展开所有节点	boolean	—	false
          :default-expand-all="true" 这个是完整写法
          一般设置true 直接加这个属性就行
 -->
  <div>
    <el-tree :data="data" :props="defaultProps" :default-expand-all="false" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 映射
      defaultProps: {
        label: 'name',
        children: 'child'
      },
      data: [
        {
          name: '班级',
          child: [
            {
              name: '组长',
              child: [
                { name: '电脑' },
                { name: '电脑1' },
                { name: '电脑2' }
              ]
            },
            { name: '组员' }
          ]
        }
      ]
    }
  }
}
</script>

<style>

</style>
